import React, { useState } from 'react'
import { getSubjectsApi } from '@/api'
import { useSelector } from 'react-redux'
import "./subjects.less"
import { Popup } from 'antd-mobile'

export default function Subjects() {
  const { subjectName } = useSelector((state: IRootStore) => state.user)
  const [name, setName] = useState(subjectName)
  const [show, setShow] = useState(false)
  const [list, setList] = useState<ISubject[]>([])

  const showSubjectList = () => {
    // 目标：请求 大分类的数据的优化 
    // 大分类的数据一般情况下，在短时间内不会变化，所以没必要每次都重复请求
    // 优化思路： 把数据存储在 本地 ， 需要的时候再请求
    // 存在本地，怎么存 ? sessionStorage , 希望还是会去服务器请求数据的，所以可以使用它
    // 做法： 判断，如果已经有数据了，直接使用 ，否则，再请求，请求回来，记得存到 sessionStorage
    // 判断，是否已经有请求回来的数据
    let data = sessionStorage.getItem('subjects')
    if (data) {
      // 直接转换渲染
      setList(JSON.parse(data) as ISubject[]) // 写一个类型的转换，告诉维护的人，这是什么数据
    } else {
      // 没有数据，说明需要向服务器请求
      getSubjectsApi().then(res => {

        if (res.errCode == 0) {
          // 数组的渲染
          setList(res.data)
          // 已经把数据请求回来了， 把数据存到 sessionStorage
          sessionStorage.setItem('subjects', JSON.stringify(res.data))

        }
      })
    }
    // 显示
    setShow(true)
  }
  return (
    <div className='subjects'>
      <p>首页显示的学科： {subjectName}</p>
      <h3 onClick={showSubjectList}>{name}</h3>

      <Popup
        visible={show}
        onMaskClick={() => {
          setShow(false)
        }}
        position='left'
        bodyStyle={{ width: '60vw' }}
      >
        {
          list.map(item => <div key={item.id}>{item.title}</div>)
        }
      </Popup>
    </div>
  )
}
